<template>
	<view class="zhuce">
		<view class="uni-form-item uni-column">
			<uni-section>
				<uni-easyinput type="text" @input="validatePhone" v-model="phoneInput" placeholder="输入手机号码"></uni-easyinput>
				<text v-if="phoneError" class="error-message">{{ phoneError }}</text>
			</uni-section>
			<uni-section>
				<view class="code-input">
					<uni-easyinput type="text" v-model="codeInput" placeholder="输入短信验证码"></uni-easyinput>
					<button class="send-code-btn" :disabled="!phoneInput || sendingCode" @click="sendCode">
						{{ sendingCode ? `${countdown}秒后重新发送` : '发送验证码' }}
					</button>
				</view>
			</uni-section>
			<uni-section>
				<uni-easyinput type="password" v-model="passwordInput" placeholder="输入新的登录密码"></uni-easyinput>
			</uni-section>
		</view>
		<button class="btn" @click="addReg" :disabled="isFormValid">确认</button>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed,watch } from 'vue';
	// import axios from 'axios';

	const phoneInput = ref<string>('');
	const codeInput = ref<string>('');
	const passwordInput = ref<string>('');
	const sendingCode = ref<boolean>(false);
	const countdown = ref<number>(60);
	const phoneError = ref<string>('')
	const isValidPhone = ref<boolean>(true)
	const validatePhone = (value : string) => {
		const phoneRegex = /^1[3-9]\d{9}$/;
		if (value && !phoneRegex.test(value)) {
			phoneError.value = '请输入有效的手机号码';
			isValidPhone.value = false;
		} else {
			phoneError.value = '';
			isValidPhone.value = true;
		}
	}

	watch(phoneInput, validatePhone);
	// 计算属性，用于确定表单是否有效
	const isFormValid = computed(() => {
		return !phoneInput.value || !codeInput.value || !passwordInput.value;
	});

	const addReg = () => {
		uni.request({
			url: 'http://localhost:3000/ljy/updateuser',
			method: 'PUT',
			data: {
				phone: phoneInput.value,
				code: codeInput.value,
				password: passwordInput.value
			},
			success(res : any) {
				if (res.data.code == 200) {
					uni.showToast({
						title: '修改成功',
						duration: 1000,
						icon: 'success'
					});
					passwordInput.value = '';
					codeInput.value = '';
					uni.navigateTo({
						url: '/pages/login/login'
					});
				} else {
					console.error('修改失败:', res.data.message);
					uni.showToast({
						title: res.data.message,
						duration: 1000,
						icon: 'none'
					});
				}
			},
			fail(error : any) {
				console.error('请求失败:', error);
				uni.showToast({
					title: '请求失败',
					duration: 1000,
					icon: 'none'
				});
			}
		});
	};

	const sendCode = async () => {
		if (sendingCode.value) return;

		sendingCode.value = true;
		uni.request({
			url: 'http://localhost:3000/ljy/send-code',
			method: "POST",
			data: {
				phoneNumber: phoneInput.value
			},
			success(response) {
				console.log(response.data.message);
				const timer = setInterval(() => {
					countdown.value--;
					if (countdown.value <= 0) {
						clearInterval(timer);
						sendingCode.value = false;
						countdown.value = 60;
					}
				}, 1000);
			},
			fail(error) {
				console.error('验证码发送失败:', error);
				sendingCode.value = false;
			}
		})

	};

	const verifyCode = async () => {
		if (sendingCode.value) return;
		uni.request({
			url: 'http://localhost:3000/ljy/verify-code',
			method: "POST",
			data: {
				phoneNumber: phoneInput.value, code: codeInput.value
			},
			success(response) {
				console.log(response.data.message);
			},
			fail(error) {
				console.error('验证码验证失败:', error);
			}
		})


	};
</script>

<style scoped lang="scss">
	.zhuce {
		padding: 60rpx;

		.uni-form-item {
			margin-bottom: 20rpx;
		}

		.code-input {
			display: flex;
			align-items: center;

			.send-code-btn {
				margin-left: 10rpx;
				padding: 10rpx 20rpx;
				background-color: #007aff;
				color: #fff;
				border: none;
				border-radius: 50rpx;
				font-size: 25rpx;
			}

			.send-code-btn:disabled {
				background-color: #ccc;
			}
		}

		.tips {
			padding-top: 30rpx;
			padding-bottom: 40rpx;

			.lab {
				text {
					font-size: 25rpx;
				}

				.red {
					text-decoration: underline;
					color: red;
				}
			}
		}

		.btn {
			border-radius: 100rpx;
			background-color: blue;
			color: #fff;
			margin-top: 60rpx;
		}
	}
	.error-message {
		color: red;
		font-size: 25rpx;
		margin-top: 10rpx;
	}
</style>